/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { TableCustomize } from '../../../components/TableCustomize'
import * as ProductionOrderService from '../../../axios/ProductionOrder'
import {
  // Row,
  // Col,
  Form,
  // Select,
  // Layout,
  List,
  // Button,
  // Pagination,
  // Cascader
} from 'antd';
// const FormItem = Form.Item;
// const { Header, Footer, Sider, Content } = Layout;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

class AddFrom1 extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      addFrom: [],
      formData: [[], []],
      options: [],
      loading1: false
    }
  }
  componentDidMount() {
    const { AssignProductionOrderList, onSaveAddFormList } = this.props;
    console.log(AssignProductionOrderList, 'AssignProductionOrderList*****')
    onSaveAddFormList(1, AssignProductionOrderList)
    this.setState({ formData: AssignProductionOrderList })

    // 派工工序查询
    ProductionOrderService.findProcedureAll().then(res => {
      // console.log(res.data.data, '派工工序查询');
      this.setState({
        formData1: res.data.data
      });
    })
  }
  chooseRow = (record) => {
    let flag = true;
    let index = 0;
    // console.log(record, 'record')
    this.state.selectedRowKeys.forEach((row, i) => {
      if (row === record.procedureCode) {
        flag = false;
        index = i;
      }
    })
    const selectedRowKeys = this.state.selectedRowKeys;
    if (flag) {
      selectedRowKeys.push(record.procedureCode);
    } else {
      selectedRowKeys.splice(index, 1);
    }
    this.setState({ loadingPeople: true }, () => setTimeout(() => {
      const { onSaveAddFormList } = this.props;
      onSaveAddFormList(2, selectedRowKeys)
      this.setState({ selectedRowKeys, loadingPeople: false })
    }))
  }
  deleteItem = (item) => {
    this.setState({ loading1: true })
    const { formData } = this.state;
    for (var key in formData) {
      if (formData[key].batchNo === item) {
        formData.splice(key, 1)
      }
    }
    const { onSaveAddFormList } = this.props;
    onSaveAddFormList(1, formData)
    this.setState({ formData }, () => {
      setTimeout(() => {
        this.setState({ loading1: false })
      });
    })
  }
  render() {
    const {
      form: { getFieldDecorator },
      type
    } = this.props;
    const { selectedRowKeys, formData, formData1, loading1 } = this.state
    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: (selectedRowKeys) => {
        const { onSaveAddFormList } = this.props;
        onSaveAddFormList(2, selectedRowKeys)
        this.setState({ selectedRowKeys })
      }
    }
    return (
      <Form >
        <div style={{ display: 'flex', justifyContent: 'space-between', width: '98%', margin: '0 auto' }}>
          <div style={{ width: '49%' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div className='ant-steps-item-icon' style={{ background: '#1890ff', border: 0 }}>
                <span className='ant-steps-icon' style={{ color: '#fff' }}>1</span>
              </div>
              <div>
                选择批号
              </div>
            </div>
            <div style={{ marginTop: '15px', width: '80%' }}>
              <List
                size="small"
                header={<div style={{ fontWeight: 600 }}>批号</div>}
                // footer={<Pagination defaultCurrent={1} total={50} />}
                loading={loading1}
                bordered
                dataSource={formData}
                renderItem={item => <List.Item style={{ backgroundColor: type === 0 && item.assembleStatus === '未派工' ? '#f39999' : 'transparent' }}><span >{item.batchNo}</span><a style={{ fontSize: 16 }} onClick={() => { this.deleteItem(item.batchNo) }}>×</a></List.Item>}
              />
            </div>
          </div>
          <div style={{ width: '49%' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div className='ant-steps-item-icon' style={{ background: '#1890ff', border: 0 }}>
                <span className='ant-steps-icon' style={{ color: '#fff' }}>2</span>
              </div>
              <div>
                选择工序
              </div>
            </div>
            <div style={{ marginTop: '15px', width: '80%' }}>
              <TableCustomize
                columns={[{ title: '工序', dataIndex: 'procedureName' }]}
                rowKey={record => record.procedureCode}
                dataSource={formData1}
                pagination={false}
                rowSelection={rowSelection}
                onRow={(record) => ({
                  onClick: this.chooseRow.bind(this, record)
                })}
              />
            </div>
          </div>
        </div>
      </Form>
    );
  }
}

export default Form.create()(AddFrom1);
